<template>
	<view>
		<view class="m30">
			<view class="c343 bold italic-text">Hello 从这里开启你的宠物配对吧~</view>
			<u-gap height="20"></u-gap>
			<view class="bgFff radius30 p30">
				<view class="c343 f26">宠物类别</view>
				<u-gap height="10"></u-gap>
				<view class="flex-jus">
					<view class="radius50 bgPink p30 flex1 mr20 flex-jus type-item" :class="{'active':form.petType == 1}"
						@click="selpetType(1)">
						<image src="../static/pet/cat.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<text class="bold c343">喵喵</text>
					</view>
					<view class="radius50 bgPink p30 flex1 ml20 flex-jus type-item" :class="{'active':form.petType == 2}"
						@click="selpetType(2)">
						<image src="../static/pet/dog.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<text class="bold c343">汪汪</text>
					</view>
				</view>
				<u-gap height="15"></u-gap>
				<view class="flex-jus" @click="sel_variety()">
					<view class="">
						<text class="c343 f26 ml10">宠物品种</text>
					</view>
					<view class="flex1 ml30">
						<u-input v-model="sel_data.petVariety.dictLabel" disabled disabledColor="#fff" border="none"
							inputAlign="right" placeholder="请选择宠物品种">
							<u-icon name="arrow-right" size="16" slot="suffix"></u-icon>
						</u-input>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus">
					<view class="">
						<text class="c343 f26 ml10">宠物昵称</text>
					</view>
					<view class="flex1 ml30">
						<u-input v-model="form.petName" border="none"
							inputAlign="right" placeholder="请输入宠物昵称">
						</u-input>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus">
					<view class="">
						<text class="c343 f26 ml10">宠物性别</text>
					</view>
					<view class="">
						<u-radio-group v-model="form.petSex" activeColor="#FFDE6D">
							<u-radio :customStyle="{marginRight: '8px'}" size="16" labelSize="12" v-for="(item, index) in sexList"
								:key="index" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="" v-if="type_list.length > 0">
					<view class="" v-for="(item,index) in type_list" :key="index" @click="sel_type(item)">
						<view class="flex-jus">
							<view class="">
								<text class="c343 f26 ml10">{{item.name}}</text>
							</view>
							<view class="flex1 ml30">
								<u-input v-model="sel_data[item.key].dictLabel" disabled disabledColor="#fff" border="none"
									inputAlign="right" :placeholder="'请选择' + item.name">
									<u-icon name="arrow-right" size="16" slot="suffix"></u-icon>
								</u-input>
							</view>
						</view>
						<u-line color="#ddd" margin="30rpx 0"></u-line>
					</view>
				</view>
				<view class="">
					<view class="">
						<text class="c343 f26 ml10">头像</text>
					</view>
					<view class="mt20 ml10">
						<u-upload :fileList="iconList" @afterRead="(event) => {afterRead(event,'iconList')}" @delete="(event) => {deletePic(event,'iconList')}" name="1" multiple :maxCount="1"></u-upload>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="">
					<view class="">
						<text class="c343 f26 ml10">宠物照片</text>
					</view>
					<view class="mt20 ml10">
						<u-upload :fileList="imgList" @afterRead="(event) => {afterRead(event,'imgList')}" @delete="(event) => {deletePic(event,'imgList')}" name="1" multiple :maxCount="9"></u-upload>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="">
					<view class="">
						<text class="c343 f26 ml10">配对宣言</text>
					</view>
					<view class="mt20 ml10">
						<u--textarea v-model="form.declaration" placeholder="可写择宠要求"></u--textarea>
					</view>
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view>
				<u-button color="#FFDE6D" :customStyle="{'color':'#34314F'}" shape="circle"
					@click="addPetbtn">{{id?'更新档案':'创建档案'}}</u-button>
			</view>
			<u-gap height="20"></u-gap>
		</view>
		<!-- //申请原因 -->
		<u-popup :show="show_filter" @close="close" mode="center" @open="show_filter = true" closeable
			round="20" :customStyle="{'width':'80%'}">
			<view class="p30">
				<view class="c343 bold">{{title}}</view>
				<u-gap height="20"></u-gap>
				<view class="type_box">
					<u-radio-group v-model="modal_filterIndex" placement="column">
						<u-radio :customStyle="{margin: '8px 0'}" labelSize="14" activeColor="#FFDE6D"
							v-for="(item, index) in data_list" :key="index" :label="item.dictLabel" :name="index">
						</u-radio>
					</u-radio-group>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'40%'}"
						shape="circle" @click="filterConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getTypes,getPetinfo,updatePet,addPet} from '@/common/api_pet.js'
	export default {
		name: '',
		data() {
			return {
				show_filter:false,
				modal_filterIndex:0,
				sel_data:{
					petAddr:{
						dictLabel:''
					},
					petStatus:{
						dictLabel:''
					},
					petAge:{
						dictLabel:''
					},
					petVariety:{
						dictLabel:''
					}
				},
				form: {
					petName:'',
					petType:1,
					petAddr:'',
					petAge:'',
					petStatus:'',
					petVariety:'',
					petSex:1,
					icon:'',
					declaration:''
				},
				iconList:[],
				imgList:[],
				sexList:[
					{
						name:'男孩子',
						value:1
					},
					{
						name:'女孩子',
						value:2
					}
				],
				title:'',
				data_list:[],
				type_list:[],
				petDogVarietys: [],
				petCatVarietys: []
			}
		},
		onLoad(option) {
			this.id = option.id || null
			if(this.id){
				this.getPetinfo()
			}
			this.getTypes()
		},
		methods: {
			selpetType(type){
				this.form.petType = type
				this.form.petVariety = ''
				this.sel_data.petVariety = {}
			},
			sel_variety(){
				this.key = 'petVariety'
				this.title = '选择品种'
				this.data_list = this.form.petType == 1?this.petCatVarietys:this.petDogVarietys
				this.show_filter = true
			},
			sel_type(item){
				this.key = item.key
				this.title = '选择' + item.name
				this.data_list = item.data
				this.show_filter = true
			},
			// 删除图片
			deletePic(event,key) {
				this[key].splice(event.index, 1)
			},
			async afterRead(event, key) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[key].length
				lists.map((item) => {
					this[key].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$utils.uploadFile(lists[i].url)
					if (result.code == 200) {
						let item = this[key][fileListLen]
						this[key].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: this.api_host + result.full_url,
							api_url: result.full_url
						}))
						fileListLen++
					}
				}
				console.log(this[key]);
			},
			async getPetinfo() { //
				const res = await getPetinfo({
					id:this.id
				})
				if (res.code == 200) {
					this.form = res.data
					uni.setNavigationBarTitle({
						title:'更新档案'
					})
					this.sel_data = {
						petAddr:{
							petAddr:this.form.petAddr,
							dictLabel:this.form.petAddrLabel
						},
						petStatus:{
							petAddr:this.form.petStatus,
							dictLabel:this.form.petStatusLabel
						},
						petAge:{
							petAddr:this.form.petAge,
							dictLabel:this.form.petAgeLabel
						},
						petVariety:{
							petAddr:this.form.petVariety,
							dictLabel:this.form.petVarietyLabel
						}
					}
					this.iconList = [
						{
							status: 'success',
							message: '',
							url: this.api_host + this.form.icon,
							api_url:this.form.icon
						}
					]
					let data = []
					data = this.form.images.split(',')
					data.forEach(item =>{
						this.imgList.push({
							status: 'success',
							message: '',
							url: this.api_host + item,
							api_url:item
						})
					})
				}
			},
			async getTypes() { //筛选
				const res = await getTypes()
				if (res.code == 200) {
					const {
						employAddress,
						petAges,
						petStatus,
						petCatVarietys,
						petDogVarietys
					} = res.data
					this.petCatVarietys = petCatVarietys
					this.petDogVarietys = petDogVarietys
					this.type_list = [{
							name: '地区',
							data: employAddress,
							key: 'petAddr'
						},
						{
							name: '宠物年龄',
							data: petAges,
							key: 'petAge'
						},
						{
							name: '宠物状态',
							data: petStatus,
							key: 'petStatus'
						}
					]
				}
			},
			filterConfirm(){
				this.sel_data[this.key] = this.data_list[this.modal_filterIndex]
				this.form[this.key] = this.data_list[this.modal_filterIndex].dictCode
				this.show_filter = false
				this.close()
			},
			close(){
				this.modal_filterIndex = 0
				this.data_list = []
				this.show_filter = false
			},
			async addPetbtn(){
				let icon = '';
				let images = [];
				let data = {};
				this.imgList.forEach(item =>{
					images.push(item.api_url)
				})
				data = {
					petName:this.form.petName,
					petType:this.form.petType,
					petAddr:this.form.petAddr,
					petAge:this.form.petAge,
					petStatus:this.form.petStatus,
					petVariety:this.form.petVariety,
					petSex:this.form.petSex,
					icon:this.iconList[0].api_url,
					images:images.join(','),
					declaration:this.form.declaration,
				}
				if(this.form.id){
					data.id = this.form.id
				}
				uni.showLoading({
					mask:true
				})
				let res = null
				if(this.id){
					res = await updatePet(data)
				}else{
					res = await addPet(data)
				}
				uni.hideLoading()
				if(res.code == 200){
					uni.showToast({
						title:this.form.id?'宠物更新成功':'宠物添加成功',
						icon:'none'
					})
					setTimeout(() =>{
						uni.navigateBack()
					},1000)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFEEEE;
	}
	.type_box{
		max-height: 500rpx;
		overflow-y: scroll;
	}
	.type-item {
		border: 3px solid transparent;
	}

	.active {
		border-color: #34314F;
	}
</style>